<template>
  <el-container>
    <el-main>
      <el-tabs
        tab-position="left"
        :value="routeName"
        @tab-click="onTabClick"
        type="border-card"
      >
        <el-tab-pane name="/message-center/reply">
          <span slot="label"><i class="el-icon-date"></i> 回复我的</span>
          <router-view name="reply"></router-view>
        </el-tab-pane>
        <!-- <el-tab-pane name="/message-center/at" label="@我的">
          <router-view name="at"></router-view
        ></el-tab-pane> -->
        <el-tab-pane name="/message-center/like" label="收到的赞"
          ><router-view name="like"></router-view>
        </el-tab-pane>
        <!-- <el-tab-pane label="我的消息">我的消息</el-tab-pane> -->
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      routeName: "",
    };
  },
  // mounted() {
  //   if (this.$route.path === "/message-center") {
  //     this.$router.push("/message-center/reply");
  //     this.routeName = "/message-reply";
  //   }
  // },
  methods: {
    onTabClick(e) {
      if (this.$route.path !== e.name) this.$router.push(e.name);
    },
  },

  watch: {
    $route: {
      immediate: true,
      handler(newV, oldV) {
        // if (this.$route.path === "/message-center") {
        //   this.$router.push("/message-center/reply");
        //   this.routeName = "/message-reply";
        //   return
        // }
        this.routeName = newV.path;
      },
    },
  },
};
</script>

<style scoped lang="less">
.el-tabs {
  height: 638px;
  width: 1200px;
  margin: 0 auto;
  
}
</style>